<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regist</title>
</head>
<style>
    a{
        text-decoration: none;
    }
    .rigster_1{
        border-radius: 10px;
        border:0px;
        width:310px;
        height:40px;
        background-color:#0099FF;
        color:white;
    }
    .rigster_1:hover{
        background-color: dodgerblue;
    }
    #demo_1{
        color: red;
        font-size: 15px;
    }
</style>
<body>
    <div>
         用户名<input type="text" style="width:250px;height:20px" placeholder="请设置用户名" id="re_1"
               onkeyup="formSubmit_1()" >
        <p id="demo_1"> </p>
    </div>

    <div>
        手机号<input type="number"  style="width:250px;height:20px"
                  placeholder="请输入手机号" id="re_2" onkeyup="formSubmit_2()">
        <p id="demo_2"> </p>
    </div>
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;密码<input type="password" style="width:250px;height:20px"
                                         placeholder="请设置登录密码" id="re_3" onkeyup="formSubmit_3()">
        <p id="demo_3"> </p>
    </div>
    <div>
        验证码<input type="text" style="width:125px;height:20px" placeholder="请输入验证码">
        <input type="submit" value="获取短信验证码" style="width:125px;height:30px"><br>
    </div>
    <br>
    <div class="bookcommit">
        <input type="radio" name="ty" value="ty"> 阅读并接受
        <nav>
            <a href="https://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>及
            <a href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私保护声明》</a>
        </nav>
    </div>
    <br>
    <div >
        <input type="submit" value="注册" id='subbon_1' class="rigster_1" >
    </div>
    <script>
        function formSubmit_1() {
            var inpobj=document.getElementById("re_1").value;
            if (inpobj.length<6 || inpobj.length>16){
                document.getElementById("demo_1").innerHTML ="用户名长度6-16 <img src='err_small.png'>";
            }
            else{
                document.getElementById("demo_1").innerHTML="<font color = '#0099ff'>输入正确</font> <img src='ok_small.png'> ";
            }
        }
        function formSubmit_2() {
            var inpoj=document.getElementById("re_2").value;
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(inpoj)) {
                document.getElementById("demo_2").innerHTML = "<font color = 'red'>请输入正确的手机号格式</font> <img src='err_small.png'>";
                document.getElementById("re_1").style.border='1px red solid';
            }
            else {
                document.getElementById("demo_2").innerHTML="<font color = '#0099ff'>输入正确</font> <img src='ok_small.png'>";
                document.getElementById("re_1").style.border='1px blue solid';
            }
        }
        function formSubmit_3() {
            var inpobj=document.getElementById("re_3").value;

            if (inpobj==null|| inpobj.length<8){
                document.getElementById("demo_3").innerHTML ="<font color = 'red'>密码长度6-16</font> <img src='err_small.png'>";
            }
            var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
            if(reg.test(inpobj)){
                document.getElementById("demo_3").innerHTML="<font color = '#0099ff'>密码有效</font> <img src='ok_small.png'>";
            }
        }
    </script>
</body>
</html>